<template>
    <div>
        <el-row :gutter="20" class="m-b-5">
            <el-col :span="16" :offset="0">
                <el-card shadow="always" :body-style="{ height: '170px' }">
                    <el-carousel height="130px" trigger="click" autoplay loop>
                        <el-carousel-item v-for="item in imgs">
                            <img :src="item.photo" :key="item.objectId" />
                        </el-carousel-item>
                    </el-carousel>
                </el-card>
            </el-col>
            <el-col :span="8" :offset="0">
                <el-card shadow="always" :body-style="{ height: '170px' }">
                    <div class="flex flex-items-center user-cont" style="height: 100%;">
                        <el-avatar shape="square"
                            :src='user.userInfo?.avatar?user.userInfo.avatar:"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"' />
                        <div class="m-l-5">
                            <p class="flex m-b-5 flex-items-center">
                            <h2 class="username-box">{{ user.userInfo?.username }}</h2>
                            登录时间: {{user.LOGINTIME?user.LOGINTIME:'--'}}
                            </p>
                            <p class="flex flex-items-center">
                                <el-icon size="16" color="#666">
                                    <UserFilled />
                                </el-icon>
                                <span class="m-l-2">{{user.userInfo?.roleName}}</span>
                            </p>
                        </div>
                    </div>
                </el-card>

            </el-col>
        </el-row>
        <el-row :gutter="20" class="m-b-5">
            <el-col :span="6" :offset="0">
                <TextComp title="本月学员" unit="人" :content="{ day: 5, week: 5, text: '17' }" />
            </el-col>
            <el-col :span="6" :offset="0">
                <TextComp title="本月财务" unit="笔" :content="{ day: 5, week: 5, text: '20' }" />
            </el-col>
            <el-col :span="6" :offset="0">
                <TextComp title="油卡充值" unit="次" :content="{ day: 0, week: 0, text: '0' }" />
            </el-col>
            <el-col :span="6" :offset="0">
                <TextComp title="本月投诉" unit="起" :content="{ day: 0, week: 0, text: '0' }" />
            </el-col>
        </el-row>
        <el-row :gutter="20" class="m-b-5">
            <el-col :span="3" :offset="0">
                <el-tooltip content="设置首页轮播图片" placement="top">
                    <IconComp title="轮播设置" icon="icon-tupian" color="#f37b1d" path="/setting/banner" />
                </el-tooltip>
            </el-col>
            <el-col :span="3" :offset="0">
                <el-tooltip content="查看学员档案、调整" placement="top">
                    <IconComp title="学员档案" icon="icon-xueyuan" color="#1cbbb4" path="/students/list" />
                </el-tooltip>
            </el-col>
            <el-col :span="3" :offset="0">
                <el-tooltip content="进入车辆管理" placement="top">
                    <IconComp title="车辆管理" icon="icon-jiaxiao1" color="#0081ff" path="/car/car-list" />
                </el-tooltip>
            </el-col>
            <el-col :span="3" :offset="0">
                <IconComp title="油卡管理" icon="icon-youqiazhuqia" color="#66be44" path="/car/fule" />
            </el-col>
            <el-col :span="3" :offset="0">
                <el-tooltip content="查看学员练车记录" placement="top">
                    <IconComp title="练车记录" icon="icon-qizi" color="#f33747" path="/tramanger/trarecord" />
                </el-tooltip>
            </el-col>
            <el-col :span="3" :offset="0">
                <el-tooltip content="设置考试步骤" placement="top">
                    <IconComp title="考试步骤" icon="icon-lingdang" color="#8700ff" path="/setting/process" />
                </el-tooltip>
            </el-col>
            <el-col :span="3" :offset="0">
                <el-tooltip content="学员考试管理、约考、补考" placement="top">
                    <IconComp title="考试管理" icon="icon-kaoshizuoda" color="#e03997" path="/exam/student" />
                </el-tooltip>
            </el-col>
            <el-col :span="3" :offset="0">
                <el-tooltip content="进入校区设置" placement="top">
                    <IconComp title="校区设置" icon="icon-youxiji" color="#0081ff" path="/setting/school" />
                </el-tooltip>
            </el-col>
        </el-row>
        <StudentComp />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TextComp from './components/text-comp.vue'
import IconComp from './components/icon-comp.vue';
import StudentComp from './components/student-comp.vue';
import { BannerPc } from '../../api/banner';
import { BannerType } from '../../types/banner';
import { useUser } from '../../store/user';
// 轮播图
const imgs = ref<BannerType[]>([])
// 获取状态机数据
const user=useUser()

// 获取数据库数据
let res = await BannerPc()
imgs.value = res.data.results
</script>

<style lang="scss">
div {
    box-sizing: border-box;
    color: #666;
}

img {
    height: 100%;
    width: 100%;
}

.user-cont {
    .username-box {
        margin: 0 10px 0 0;
        font-size: 14px;
        color: #666;
        font-weight: bold;
    }

    p {
        font-size: 14px;
        color: #666;
    }
}
</style>